<template>
    <div>
        <el-popover
            placement="top"
            width="220"
            v-model="visible">
            <tree-select
                v-if="visible"
                v-model="selectBuildId"
                filterable
                :width="195"
                :data="buildOptions"
                :defaultProps="buildDefaultProps"
                :checkedKeys="defaultCheckedBuildId"
                @node-click="handleNodeClick"
                :nodeKey="buildNodeKey">
            </tree-select>
            <div style="text-align: right; margin: 10px">
                <el-button size="mini" @click="close">取消</el-button>
                <el-button type="primary" size="mini" @click="bindBuild">确定</el-button>
            </div>
            <el-link slot="reference" type="primary">{{buildId == 0 ? '-请选择关联建筑物-' : buildName}}</el-link>
        </el-popover>
    </div>
</template>
<script>
import TreeSelect from '@/libs/TreeSelect/Main'
import { updateRelateVideoInfo } from '@/api/sysConfig'
export default {
    mame: 'BindBuild',
    props: {
        row: {},
        buildOptions: {},
    },
    components: {
        TreeSelect
    },
    data() {
        return {
            visible: false,
            selectBuildId: this.row.relateObjId, // 当前选择的建筑物id
            selectBuildName: this.row.fbsName, // 当前选择的建筑物名称
            buildId: this.row.relateObjId, // 保存的建筑物id
            buildName: this.row.fbsName, // 保存的建筑物名称
            buildDefaultProps: {
                children: 'nodes',
                label: 'text',
                value: 'id'
            },
            buildNodeKey: 'id',
            defaultCheckedBuildId: [],
        }
    },
    created() {
        this.$nextTick(() => {
            if(this.row.relateObjId) {
                this.defaultCheckedBuildId.push(this.row.relateObjId)
            } 
        })
    },
    methods: {
        // 下拉树选择
        handleNodeClick(obj, node, item) {
            let that = this
            if(obj.id !== that.selectBuildId) {
                that.selectBuildId = obj.id
                that.selectBuildName = obj.text
            }
        },
        close() {
            let that = this
            that.selectBuildId = that.buildId
            if(!that.buildId) {
                this.defaultCheckedBuildId = []
            } else {
                this.defaultCheckedBuildId = []
                this.defaultCheckedBuildId.push(that.buildId)
            }
            that.visible = false
        },
        // 绑定建筑物
        bindBuild() {
            let that = this
            let parames = {
                relateObjId: that.selectBuildId,
                relateObjType: 2,
                videoIds: that.row.id
            }

            updateRelateVideoInfo(parames).then(res => {
                if( res.status === 200) {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    })
                    that.buildId = that.selectBuildId
                    that.buildName = that.selectBuildName
                    that.defaultCheckedBuildId = []
                    that.defaultCheckedBuildId.push(that.buildId)
                    that.visible = false
                }else{
                    this.$message.error(res.info)
                }
            })
        }
    }
}
</script>
